<template>
  <div class="app-container">
<!--    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="queryParams.userName" placeholder="请输入用户名" @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="打款方式" prop="paymentMethod">
        <dict-select :options="dict.type.payment_method" v-model="queryParams.paymentMethod"
                     placeholder="请选择打款方式"
        />
      </el-form-item>
      <el-form-item label="状态" prop="auditType">
        <dict-select :options="dict.type.recharge_withdraw_status" v-model="queryParams.auditType"
                     placeholder="请选择审核状态"
        />
      </el-form-item>
      <el-form-item label="审核申请时间" label-width="120px">
        <date-range-picker v-model="queryParams" value-format="timestamp" content-style="width: 240px"
                           startPickerName="startTime" endPickerName="endTime"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>-->

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px" class="tabel-form">
      <div>
        <el-form-item label="用户UID" prop="userRandomId">
          <el-input v-model="queryParams.userRandomId" placeholder="请输入用户UID" clearable min-width="180" />
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="queryParams.status" clearable min-width="250">
            <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户直推">
          <el-input v-model="queryParams.userDirectPush" placeholder="请输入用户直推" clearable
                      style="width: 180px;margin-right:20px;" @input="change1" />
          <!-- <el-select v-model="queryParams.pushUser" style="width: 150px;" @change="change1">
            <el-option v-for="item in pushUserList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="用户三代">
          <el-input v-model="queryParams.user3rdGeneration" placeholder="请输入用户三代" clearable
            style="width: 180px;margin-right:20px;" @input="change3" />
          <!-- <el-select v-model="queryParams.threeUser" style="width: 150px;" @change="change3">
            <el-option v-for="item in userSandai" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="用户伞下">
          <el-input v-model="queryParams.userUnderUmbrella" placeholder="请输入用户伞下" clearable
                      style="width: 180px;margin-right:20px;" @input="change2" />
          <!-- <el-select v-model="queryParams.teamUser" style="width: 150px;" @change="change2">
            <el-option v-for="item in sanxiaList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="提现次数" prop="">
          <el-input v-model="queryParams.withdrawalsNum" placeholder="请输入提现次数" clearable
                    min-width="250" />
        </el-form-item>
        <el-form-item label="提现地址" prop="trcAddress">
          <el-input v-model="queryParams.withdrawalsAddress" placeholder="请输入提现地址" clearable min-width="250" />
        </el-form-item>
<!--        <el-form-item label="用户名" prop="userName">
          <el-input v-model="queryParams.userName" placeholder="请输入用户名" clearable min-width="150" />
        </el-form-item>-->
        <el-form-item label="会员层级" prop="storey" style="margin-right: 30px">
          <el-select v-model="queryParams.storey" placeholder="请输入会员层级" style="width: 180px;" clearable>
            <el-option v-for="item in storeyList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额范围" prop="">
          <div style="width: 280px;display: flex;">
            <el-input v-model="queryParams.lowerAmount" placeholder="金额范围下限" clearable min-width="100" />
            <span style="padding: 0 10px;">到</span>
            <el-input v-model="queryParams.upperAmount" placeholder="金额范围上限" clearable min-width="100" />
          </div>
        </el-form-item>
        <el-form-item label="申请时间" prop="userName">
          <timeConvert @time-range-selected="timeRange1" ref="payTime1"></timeConvert>
<!--          <el-date-picker value-format="yyyy-MM-dd" v-model="value1" type="daterange" range-separator="至"
                          start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>-->
        </el-form-item>
        <el-form-item label="审核时间" prop="userName">
          <timeConvert @time-range-selected="timeRange2" ref="payTime2"></timeConvert>
<!--          <el-date-picker value-format="yyyy-MM-dd" v-model="value2" type="daterange" range-separator="至"
                          start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>-->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </div>
    </el-form>

<!--    <el-table v-loading="loading" :data="withdrawalsList">
      <el-table-column label="订单号" align="left" prop="id" width="200" :show-overflow-tooltip="true"/>
      &lt;!&ndash;        <el-table-column label="店铺名" align="left" prop="shopName" width="120" :show-overflow-tooltip="true"/>&ndash;&gt;
      <el-table-column label="用户名" align="left" prop="userName" width="120" :show-overflow-tooltip="true"/>
      <el-table-column label="提现金额" align="center" prop="amount" width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ $yun.priceFormatter(scope.row.amount) }}
        </template>
      </el-table-column>
      <el-table-column label="下单时间" align="center" prop="createTime" width="220">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{m}/{d}/{y}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提现方式" align="center" prop="paymentMethod" width="220">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.payment_method" :value="scope.row.paymentMethod"/>
        </template>
      </el-table-column>
      <el-table-column label="交易状态" align="center" prop="auditType" width="140">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.recharge_withdraw_status" :value="String(scope.row.auditType)"/>
        </template>
      </el-table-column>
      <el-table-column label="完成时间" align="center" prop="auditTime" width="160" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.auditTime, '{m}/{d}/{y}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('operate')" align="center" class-name="small-padding fixed-width" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.auditType == 0">
            <el-button size="mini" type="success" class="mini-btn" plain
                       @click="handleAudit(scope.row.id,'pass',scope.row)" v-hasPermi="['user:Recharge:edit']"
            >通过
            </el-button>
            <el-button size="mini" class="mini-btn mini-btn-left" type="danger" plain
                       @click="handleAudit(scope.row.id,'reject',)" v-hasPermi="['user:Recharge:remove']"
            >拒绝
            </el-button>
          </span>
          <span v-else>已关闭</span>
          &lt;!&ndash; <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['user:withdrawals:remove']"
          >{{$t('delete')}}
          </el-button> &ndash;&gt;
        </template>
      </el-table-column>
    </el-table>-->
    <el-table :show-overflow-tooltip='true' v-loading="loading" :data="withdrawalsList" border>
      <el-table-column label="用户信息" min-width="220" show-overflow-tooltip align="left">
        <template slot-scope="scope">
          <div>
            <div>
              用户UID：{{ scope.row.userRandomId }}
            </div>
            <div>
              代理名称：{{ scope.row.agentName }}
            </div>
            <div>
              会员层级：{{ scope.row.storey }}
            </div>
            <div>
              提现金额：<span style="color: red">{{ scope.row.withdrawal }}</span>
            </div>
            <div>
              提现前金额：<span style="color: red">{{ scope.row.preWithdrawal }}</span>
            </div>
            <div>
              提现通道：{{ scope.row.channelName }}
            </div>
<!--            <div>
              会员账号：{{ scope.row.userName }}
            </div>
            <div>
              上级ID：{{ scope.row.superior }}
            </div>
            <div>
              上级昵称：{{ scope.row.superiorName }}
            </div>-->
          </div>
        </template>
      </el-table-column>

      <el-table-column label="下级人数" min-width="180" show-overflow-tooltip align="left">
        <template slot-scope="scope">
          <div>
            <div>
              直推人数：{{ scope.row.directNumber }}
            </div>
            <div>
              三代人数：{{ scope.row.threeNumber }}
            </div>
            <div>
              伞下人数：{{ scope.row.twoNumber }}
            </div>
            <div>
              30天过期数：{{ scope.row.expireRecent }}
            </div>
            <div>
              20天新增人数：{{ scope.row.twentyDaysAdd }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="金额信息" min-width="180" show-overflow-tooltip align="left">
        <template slot-scope="scope">
          <div>
            <div>
              3代/团队充提差：{{ scope.row.threeDifference }} / {{ scope.row.teamDifference }}
            </div>
            <div>
              团队待审核提现：{{ scope.row.teamWithdrawalAuditing }}
            </div>
            <div>
              3代复充/提现金额：{{ scope.row.rechargeAmount }} / {{ scope.row.withdrawalAmount }}
            </div>
            <div>
              团队复充/提现金额：{{ scope.row.teamRechargeAmount }} / {{ scope.row.teamWithdrawalAmount }}
            </div>
            <div>
              3代/团队过期人数：{{ scope.row.threeExpireNumber	 }} / {{ scope.row.expireNumber }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="提现信息" min-width="240" show-overflow-tooltip align="left">
        <template slot-scope="scope">
          <div>
            <div>
              首充天数：
              <span v-if="scope.row.firstChargeDay">{{ scope.row.firstChargeDay }}</span>
              <span v-else>未充值</span>
            </div>
            <div>
              提现次数：{{ scope.row.withdrawalTimes }}
            </div>
            <div>
              同注册IP数：{{ scope.row.sameRegisterIpNum }}
            </div>
<!--            <div>
              同活跃IP数：{{ scope.row.sameActiveIpNum }}
            </div>-->
            <div>
              充提差额：{{ scope.row.difference }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="日期" min-width="230" show-overflow-tooltip align="left">
        <template slot-scope="scope">
          <div>
            <div>
              申请日期：{{$yun.convertTimestamp(scope.row.createTime)}}
            </div>
            <div>
              审核日期：{{$yun.convertTimestamp(scope.row.auditTime)}}
            </div>
            <div>
              审核状态：
              <span v-if="scope.row.status == 0">待审核</span>
              <span v-if="scope.row.status == 1">已审核</span>
              <span v-if="scope.row.status == 2">审核不通过</span>
            </div>
            <div>
              发放状态：
              <span style="color: red" v-if="scope.row.remitStatus == 0">未转账</span>
              <span style="color: red" v-if="scope.row.remitStatus == 1">已到账</span>
            </div>
            <div>
              上级ID：{{ scope.row.superiorId }}
            </div>
            <div>
              操作人：{{ scope.row.operator }}
            </div>
            <div>
              订单号：{{ scope.row.orderNo }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="备注信息" min-width="350" show-overflow-tooltip align="left">
        <template slot-scope="scope">
          <div>
            <div>
              资料备注：<span style="color: red;">{{ scope.row.profileRemake }}</span>
            </div>
            <div>
              提现备注：<span style="color: red;">{{ scope.row.withdrawalRemake }}</span>
            </div>
            <div>
              提现地址：{{ scope.row.withdrawalsAddress }}
            </div>
            <div>
              到账金额：{{ scope.row.arriveAmount }}
            </div>
            <div>
              到账时间(小时)：{{scope.row.withdrawalTime}}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('operate')" align="center" class-name="small-padding fixed-width" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0">
            <el-button size="mini" type="success"  class="mini-btn" plain
                       @click="handleAudit(scope.row.id,'pass',scope.row)" v-hasPermi="['user:Recharge:edit']">通过
            </el-button>
            <el-button size="mini" class="mini-btn mini-btn-left" type="danger" plain
                       @click="handleAudit(scope.row.id,'reject',)" v-hasPermi="['user:Recharge:remove']">拒绝
            </el-button>
          </span>
          <span v-else>
              <span v-if="scope.row.status == 1">审核通过</span>
              <span v-if="scope.row.status == 2">审核不通过</span>
          </span>
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['user:withdrawals:remove']"
          >{{$t('delete')}}
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"
    />

  </div>
</template>

<script>
import {
  delWithdrawals,
  listWithdrawals,
  auditPass,
  auditNoPass, withdrawalsList
} from '@/api/user/withdrawals'
import DictSelect from '@/components/DictSelect/index.vue'
import DateRangePicker from '@/components/DateRangePicker/index.vue'
import OssImagePreview from '@/components/ImagePreview/oss-image-preview.vue'
import Template from '@/views/setting/template/index.vue'
import { rechargeAudit } from '@/api/user/recharge'
import { delList } from '@/api/user/list'
import {convertTimestamp} from "@/utils/yun";

export default {
  name: 'Withdrawals',
  components: { Template, DateRangePicker, DictSelect, OssImagePreview },
  dicts: ['payment_method', 'recharge_withdraw_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户充值表格数据
      withdrawalsList: [] ,
      // 查询参数
      queryParams: {
        userRandomId:null,
        pageNum: 1,
        pageSize: 10,
        startDate: null,
        storey: null,
        auditStatus: null,
        withdrawalsNum: null,
        lowerAmount: null,
        upperAmount: null,
        withdrawalsAddress:null,
        conditionType:null,
        pushUser:null,
        teamUser:null,
        threeUser:null,
      },
      dateRange: [],

      statusList: [{id: 1,name: '已审核' },{id: 2,name: '已驳回'},{id: 0,name: '未审核'}],
      storeyList:[{id:1,name:'1层'},{id:2,name:'2层'},{id:3,name:'3层'},{id:4,name:'4层'},{id:5,name:'5层'}],
      // 用户伞下
      sanxiaList: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],
      // 用户三代
      userSandai: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],
      //用户直推
      pushUserList: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],
      remarkObj: {
        withdrawRemark1: null
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    convertTimestamp,
    /** 查询用户充值列表 */
    getList() {
      this.loading = true
      let obj = JSON.parse(JSON.stringify(this.queryParams))
      delete obj.teamUser
      delete obj.threeUser
      delete obj.pushUser
      this.removeNullValues(obj)
      withdrawalsList(obj)
        .then(response => {
          this.withdrawalsList = response.data.records
          this.total = response.data.total
          this.loading = false
        })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      // if(this.queryParams.pushUser !== null) this.queryParams.conditionType = 1
      // if(this.queryParams.teamUser !== null) this.queryParams.conditionType = 2
      // if(this.queryParams.threeUser !== null) this.queryParams.conditionType = 3
      // if( this.queryParams.conditionType&&!this.queryParams.userRandomId) return this.$modal.msgError('请输入账户名')
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs['payTime1'].clear()
      this.$refs['payTime2'].clear()
      this.resetForm("queryForm");
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        startDate: null,
        storey: null,
        auditStatus: null,
        withdrawalsNum: null,
        lowerAmount: null,
        upperAmount: null,
        withdrawalsAddress:null,
        conditionType:null,
        pushUser:null,
        teamUser:null,
        threeUser:null,
      }
      this.getList();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm(this.$t('delete-or-not')).then(function() {
        return delWithdrawals(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess(this.$t('delete-success'))
      }).catch(() => {
      })
    },
    async handleAudit(id, type, row) {
      let that = this
      let data = { id: id }
      if (type === 'pass') {
        console.log('row',row)
        data.actualArrivalAmount = row.withdrawal
        this.$modal.confirm(`您要提现的金额为${row.withdrawal}元`).then(function() {
          return auditPass(data).then(res => {
            that.$modal.msgSuccess('提现成功')
          })
        }).then(() => {
          that.getList()
          // that.$modal.msgSuccess(this.$t('delete-success'))
        })
      } else {
        const h = this.$createElement
        this.$prompt(h('p', null, [h('i', { style: 'color: red' }, '* '),
            h('span', null, type == 'pass' ? '实际到账金额' : '备注')]),
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /^.+$/,
            inputErrorMessage: '请输入内容'
          }).then(async({ value }) => {
          data.auditDesc = value
          await auditNoPass(data).then(res => {
            that.$modal.msgSuccess(this.$t('audit-success'))
          }).then(() => {
            that.getList()
          })
        })
      }
    },
    change1(e) {
      this.queryParams.userDirectPush = e
    },
    change2(e) {
      this.queryParams.userUnderUmbrella = e
    },
    change3(e) {
      this.queryParams.user3rdGeneration = e
    },
    removeNullValues(obj) {
      for (let key in obj) {
        if (obj[key] === null) {
          delete obj[key];
        }
      }
    },
    timeRange1(obj){
      this.queryParams.createTimeStart = obj.startTime;
      this.queryParams.createTimeEnd = obj.endTime;
    },
    timeRange2(obj){
      this.queryParams.auditTimeStart = obj.startTime;
      this.queryParams.auditTimeEnd = obj.endTime;
    },
  },
  watch: {
    dateRange(value) {
      this.queryParams.startTime = value[0]
      this.queryParams.endTime = value[1]
    }
  }
}
</script>
